<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p id="test">{{msg}}</p>
      <button @click="msg=msg+1">按钮</button>
      <button @click="$destroy()">卸载vue实例</button>
    </div>

    <script src="./vue.js"></script>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello directives',
        },
        // 初始化阶段(主要是将data的数据添加到vm实例上,实现响应式)
        // beforeCreate() {
        //   console.log(
        //     'beforecreate- 表示要开始初始化了-实例上还没有数据',
        //     this.msg
        //   )
        // },
        // created() {
        //   console.log('created- 表示要初始化完毕-实例上有数据了', this.msg)
        // },

        // // 挂载阶段(主要是解析模板,将模板的内容渲染到页面上)
        // beforeMount() {
        //   console.log(
        //     'beforeMount- 表示要开始解析模板了,但是模板的内容还没有渲染到页面上',
        //     document.getElementById('test').innerText
        //   )
        // },
        // mounted() {
        //   console.log(
        //     'mounted- 表示模板解析完毕,并且模板的内容已经渲染到页面上',
        //     document.getElementById('test').innerText
        //   )
        // },

        // 更新阶段(当响应式数据发生变化,则模板重新解析)
        // beforeUpdate() {
        //   console.log(
        //     'beforeUpdate- 表示模板即将重新解析,此时页面上渲染的之前旧的数据',
        //     document.getElementById('test').innerText
        //   )
        // },
        // updated() {
        //   console.log(
        //     'updated- 表示模板重新解析完毕,此时页面上渲染的之前新的数据',
        //     document.getElementById('test').innerText
        //   )
        // },

        beforeDestroy() {
          // 注意: 虽然这里暂时还没有清除掉响应式的内容,但是修改数据的操作也不会有任何效果
          // this.msg = this.msg + 999
          console.log(
            'beforeDestroy- 此时还没有开始卸载,接下来马上要卸载了.所以响应式的数据还生效',
            this.msg
          )
        },

        destroyed() {
          console.log(
            'destroyed- 此时已经卸载完毕,所以响应式的数据不生效了,但是实例上还有这个属性',
            this.msg
          )
        },
      })
    </script>
  </body>
</html>
